<template>
  <div>
    <el-page-header @back="goBackOrders" content="订单详情页"> </el-page-header>
    <el-divider content-position="center">订单状态</el-divider>
    <el-card shadow="hover">
      <el-steps :active="activeStep()" finish-status="success" simple>
        <el-step title="待支付"></el-step>
        <el-step title="待发货"></el-step>
        <el-step title="待确认"></el-step>
        <el-step title="待评价"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
    </el-card>
    <!-- 信息展示 -->
    <template>
      <el-form label-position="left" inline class="demo-table-expand">
        <el-divider content-position="center">订单信息</el-divider>
        <el-form-item label="订单ID">
          <span>{{ this.$route.params.id }}</span>
        </el-form-item>
        <el-form-item label="订单编号">
          <span>{{ this.$route.params.order_number }}</span>
        </el-form-item>
        <el-form-item label="状态">
          <span>{{ this.$route.params.status_desc }}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ this.$route.params.created_time }}</span>
        </el-form-item>
        <el-divider content-position="center">用户信息</el-divider>
        <el-form-item label="姓名">
          <span>{{ this.$route.params.member.nickname }}</span>
        </el-form-item>
        <el-form-item label="电话">
          <span>{{ this.$route.params.member.mobile }}</span>
        </el-form-item>
        <el-form-item label="地址">
          <span>{{ this.$route.params.member.address }}</span>
        </el-form-item>
        <el-form-item label="备注">
          <span>{{ this.$route.params.note }}</span>
        </el-form-item>
        <el-divider content-position="center">商品信息</el-divider>
      </el-form>
    </template>
    <template>
      <el-table
        :data="this.$route.params.foods"
        border
        :row-class-name="tableRowClassName"
        :header-cell-style="{ background: '#ffd0bd', color: '#606266' }"
      >
        <el-table-column prop="name" align="center" label="名称">
        </el-table-column>
        <el-table-column prop="price" align="center" label="单价">
        </el-table-column>
        <el-table-column prop="quantity" align="center" label="数量">
        </el-table-column>
      </el-table>
    </template>
    <!-- 总价 -->
    <template>
      <el-form label-position="left" inline class="demo-table-expand">
        <el-form-item label="总金额">
          <span>{{ this.$route.params.price }}</span>
        </el-form-item>
      </el-form>
    </template>
    <!-- 用户评价 -->
    <el-divider content-position="center">用户评价</el-divider>
    <span class="comment">评分 >></span>
    <p>
      <el-rate
        v-model="comments.score"
        disabled
        show-text
      >
      </el-rate>
    </p>
    <span class="comment">内容 >></span>
    <p>{{ comments.content }}</p>
    <span class="comment">时间 >></span>
    <p>{{ comments.created_time }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: {},
      iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
    }
  },
  watch: {
    $route() {
      this.getComments()
    },
  },
  methods: {
    goBackOrders() {
      this.$router.push('/orders')
    },
    // 激活步骤条
    activeStep: function () {
      var value = 1
      switch (this.$route.params.status_desc) {
        case '待支付':
          value = 1
          break
        case '待发货':
          value = 2
          break
        case '待确认':
          value = 3
          break
        case '待评价':
          value = 4
          break
        case '已完成':
          value = 6
          break
        default:
          value = 1
          break
      }
      return value - 1
    },
    // 带状态的表格
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'success-row'
      }
      return ''
    },
    // 评价请求
    async getComments() {
      const path = this.URL.Comments
      const { data: result } = await this.$http
        .get(path, {
          params: {
            id: this.$route.params.id,
          },
        })
        .catch(() => {
          this.$message.error('评价获取失败')
        })
      this.comments = result['data']
    },
  },
  created: function () {
    this.getComments()
  },
}
</script>

<style>
.el-table .success-row {
  background: #f0f9eb;
}

.comment {
  font-weight: bold;
}
</style>